<template>
  <LuckyGrid ref="myLucky"
              width="300px"
              height="300px"
              :prizes="prizes"
              :blocks="blocks"
              :buttons="buttons"
              @start="startCallback"
              @end="endCallback" />
</template>

<script>
export default {
  data() {
    return {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        {x: 0, y: 0,  fonts: [{ text: '0', top: '40%' }], background: '#e9e8fe' },
        {x: 1, y: 0,  fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        {x: 2, y: 0,  fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        {x: 2, y: 1,  fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        {x: 2, y: 2,  fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        {x: 1, y: 2,  fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
        {x: 0, y: 2,  fonts: [{ text: '6', top: '10%' }], background: '#b8c5f2' },
        {x: 0, y: 1,  fonts: [{ text: '7', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          x: 1, y: 1,
          background: 'green',
          fonts: [{ text: '开始\n抽奖', top: '20px' }],
        },
      ],
    };
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback() {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play();
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0;
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index);
      }, 3000);
    },
    // 抽奖结束会触发end回调
    endCallback(prize) {
      console.log(prize.fonts[0].text);
    },
  },
};
</script>